<!-- 收入分析 -->
<script setup>
import {
  listBriefing,
  getBriefing,
  delBriefing,
  addBriefing,
  updateBriefing,
} from "@/api/system/briefing";
import { onMounted, getCurrentInstance, ref, reactive, toRefs } from "vue";

const dialog = reactive({
  visible: false,
  title: "",
});
const { proxy } = getCurrentInstance();
const loading = ref(true);
const total = ref(0);
const briefingList = ref([]);
const briefingView = ref("");
const buttonLoading = ref(false);
const briefingFormRef = ref();
const initFormData = {
  briefingId: undefined,
  ossId: undefined,
  briefingName: undefined,
  briefingTime1: undefined,
  briefingContent: "",
};
const data = reactive({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    briefingName: undefined,
    briefingTime1: "",
    params: {
      briefingTime: undefined,
    },
  },
  rules: {
    briefingName: [
      { required: true, message: "简报名称不能为空", trigger: "blur" },
    ],
    briefingTime1: [
      { required: true, message: "简报时间不能为空", trigger: "blur" },
    ],
  },
});
const { queryParams, form, rules } = toRefs(data);
const dateRangeBriefingTime = ref(["", ""]);
const isDialogVisible = ref(false);
/** 查询简报管理列表 */
const getList = async () => {
  loading.value = true;
  queryParams.value.params = {};
  proxy?.addDateRange(
    queryParams.value,
    dateRangeBriefingTime.value,
    "BriefingTime"
  );
  const res = await listBriefing(queryParams.value);
  briefingList.value = res.rows;
  total.value = res.total;
  loading.value = false;
};
let date = ref("");

let headers = [
  { title: "文件名称", sortable: false, key: "briefingName" },
  { title: "日期", sortable: false, key: "briefingTime" },
  { title: "操作", key: "actions", sortable: false },
];
const queryList = () => {
  getList();
};
const Resetting = () => {
  date.value = "";
  queryParams.value.briefingName = "";
  queryParams.value.briefingTime = "";
  queryParams.value.briefingTime1 = "";
  getList();
};
//查看详情按钮
const showDailog = async (row) => {
  isDialogVisible.value = true;
  let res = await getBriefing(row.briefingId);
  console.log(res, "isDialogVisible.value");
  briefingView.value = res.data.briefingContent;
};

//删除
const handleDelete = async (row) => {
  const _briefingIds = row.briefingId;
  await proxy?.$modal
    .confirm('是否确认删除简报管理编号为"' + _briefingIds + '"的数据项？')
    .finally(() => (loading.value = false));
  await delBriefing(_briefingIds);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
};
/** 下载按钮操作 */
const handleDownload = (row) => {
  proxy?.$download.oss(row.ossId);
};
/** 修改按钮操作 */
const handleUpdate = async (row) => {
  reset();
  const _briefingId = row?.briefingId;
  const res = await getBriefing(_briefingId);
  form.value.briefingTime1 = res.data.briefingTime;
  form.value.briefingId = res.data.briefingId;
  form.value.ossId = res.data.ossId;
  form.value.briefingName = res.data.briefingName;
  form.value.briefingContent = res.data.briefingContent;
  dialog.visible = true;
  dialog.title = "修改简报管理";
};
/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "添加简报管理";
};
/** 提交按钮 */
const submitForm = () => {
  if (form.value.ossId) {
    briefingFormRef.value?.validate(async (valid) => {
      if (valid) {
        buttonLoading.value = true;
        if (form.value.briefingId) {
          await updateBriefing(form.value).finally(
            () => (buttonLoading.value = false)
          );
        } else {
          await addBriefing(form.value).finally(
            () => (buttonLoading.value = false)
          );
        }
        proxy?.$modal.msgSuccess("操作成功");
        dialog.visible = false;
        await getList();
      }
    });
  }else{
    proxy?.$modal.msgError("请先上传文件");
  }
};
/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  briefingFormRef.value?.resetFields();
};
/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};
onMounted(() => {
  getList();
});
</script>

<template>
  <VCard>
    <VCardText class="py-10">
      <VRow class="match-height">
        <VCol cols="12" md="3">
          <AppTextField
            v-model="queryParams.briefingName"
            label="文件名称"
            placeholder="请输入文件名称"
            density="compact"
          />
        </VCol>
        <VCol cols="12" md="3">
          <div class="block">
            <div>
              <span style="font-size: 13px">简报日期</span>
            </div>
            <el-date-picker
              style="
                background-color: rgb(var(--v-theme-surface));
                inline-size: 100%;
              "
              v-model="queryParams.briefingTime1"
              type="month"
              align="right"
              unlink-panels
              placeholder="  请选择日期"
              value-format="YYYY-MM"
            >
            </el-date-picker>
          </div>
        </VCol>

        <VCol cols="12" md="2" class="display_flex-end">
          <VBtn color="primary" density="compact" @click="queryList">
            查询
          </VBtn>

          <VBtn variant="outlined" density="compact" @click="Resetting">
            重置
          </VBtn>
        </VCol>

        <VCol cols="12" md="3" class="display_flex-end">
          <VBtn color="primary" density="compact" @click="handleAdd">
            上传
          </VBtn>
        </VCol>

        <VCol cols="12" md="12">
          <VDataTable
            :headers="headers"
            :items="briefingList"
            :items-per-page="10"
            class="text-no-wrap"
          >
            <template #item.actions="{ item }">
              <div class="d-flex gap-1 position_a">
                <!-- <IconBtn @click="isDialogVisible = true"> -->
                <IconBtn @click="showDailog(item)">
                  <VIcon>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-eye"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="rgb(var(--v-theme-primary))"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                      <path
                        d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
                      />
                    </svg>
                  </VIcon>
                </IconBtn>
                <IconBtn @click="handleUpdate(item)">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-edit"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="rgb(var(--v-theme-primary))"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path
                      d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"
                    />
                    <path
                      d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"
                    />
                    <path d="M16 5l3 3" />
                  </svg>
                </IconBtn>
                <IconBtn @click="handleDownload(item)">
                  <VIcon>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-download"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="rgb(var(--v-theme-primary))"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                      <path d="M7 11l5 5l5 -5" />
                      <path d="M12 4l0 12" />
                    </svg>
                  </VIcon>
                </IconBtn>
                <IconBtn @click="handleDelete(item)">
                  <VIcon>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon icon-tabler icon-tabler-trash"
                      width="20"
                      height="20"
                      viewBox="0 0 24 24"
                      stroke-width="1.5"
                      stroke="rgb(var(--v-theme-primary))"
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                      <path d="M4 7l16 0" />
                      <path d="M10 11l0 6" />
                      <path d="M14 11l0 6" />
                      <path
                        d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"
                      />
                      <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                    </svg>
                  </VIcon>
                </IconBtn>
              </div>
            </template>
          </VDataTable>
        </VCol>
        <VDialog v-model="isDialogVisible" width="1200">
          <!-- Dialog close btn -->
          <DialogCloseBtn @click="isDialogVisible = !isDialogVisible" />
          <!-- Dialog Content -->
          <VCard title="详情">
            <VCardText>
              <editor v-model="briefingView" :min-height="192" />
            </VCardText>
          </VCard>
        </VDialog>
        <!-- 添加或修改简报管理对话框 -->

        <el-dialog
          :title="dialog.title"
          v-model="dialog.visible"
          width="1200px"
          append-to-body
        >
          <el-form
            ref="briefingFormRef"
            :model="form"
            :rules="rules"
            label-width="80px"
          >
            <el-form-item label="文件名">
              <fileUpload v-model="form.ossId" />
            </el-form-item>
            <el-form-item label="简报名称" prop="briefingName">
              <el-input
                v-model="form.briefingName"
                placeholder="请输入简报名称"
              />
            </el-form-item>
            <el-form-item label="简报时间" prop="briefingTime1">
              <el-date-picker
                clearable
                v-model="form.briefingTime1"
                type="datetime"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                placeholder="请选择时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="简报时间" prop="briefingTime1">
              <editor v-model="form.briefingContent" :min-height="192" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button
                :loading="buttonLoading"
                type="primary"
                @click="submitForm"
                >确 定</el-button
              >
              <el-button @click="cancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </VRow>
    </VCardText>
  </VCard>
</template>

<style lang="scss" >
@use "@core/scss/template/libs/apex-chart.scss";

.display_flex-end {
  display: flex;
  align-items: flex-end;
  gap: 15px;
}

.el-picker-panel {
  background-color: rgb(var(--v-theme-surface)) !important;
}

.el-date-editor .el-input__inner {
  background-color: rgb(var(--v-theme-surface));
  font-size: 13px !important;
}

.el-input__prefix {
  display: none;
  background-color: rgb(var(--v-theme-surface));
}

.el-input__wrapper {
  padding-block: 0;
  padding-inline: 2px;
}

.mb-1 {
  margin-block-end: 0 !important;
}
</style>
